<template>
  <div class="room-info">
    <div class="left">
      <a v-if="filterImages.length >= 1" style="cursor: pointer">
        <img :src="filterImages[0].url" alt="" @click="createImageYl">
        <!-- 图片容器的右下角图片数 -->
        <div class="img-count" v-if="filterImages.length > 1">
          {{ filterImages.length }}
        </div>
        <!-- /图片容器的右下角图片数 -->
      </a>
      <img src="http://images.rzccq.com/42a7bdafba834f76062815ed2a3596b3" alt="" v-else>
    </div>
    <div class="right">
      <slot></slot>
    </div>

    <div class="shade" @click.stop="closeShade" v-if="isShowShade">
      <div class="slider">
        <div class="slider-item" v-for="(image, index) in filterImages"
             v-if="currentIndex === index"
             @click="showSlides(currentIndex += 1)" :key="index">
          <img :src="image.url" style="height: 90vh;max-height: 800px">
          <div class="_detail">
            <span>{{image.name}}</span>
            <span class="right">第 {{currentIndex + 1}} 张, 共 {{filterImages.length}} 张</span>
          </div>
        </div>
      </div>
      <a class="prev" v-if="filterImages.length > 1" @click="showSlides(currentIndex -= 1)">❮</a>
      <a class="next" v-if="filterImages.length > 1" @click="showSlides(currentIndex += 1)">❯</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    props: {
      images: {
        type: [Array, String],
        required: true
      },
      url: String,
      name: String
    },
    data() {
      return {
        isShowShade: false,
        currentIndex: 0
      }
    },
    computed: {
      /**
       * @description 过滤图片数组
       */
      filterImages() {
        let arr = []
          , flag = !!this.url
        ;
        if (flag && !this.name)
          throw new Error('指定了【url】时，必须指定【name】！');
        let imgs = Array.isArray(this.images) ? this.images : [this.images];
        imgs.forEach(item => {
          arr.push(
            {url: flag ? item[this.url] : item, name: item[this.name]}
          )
        });
        return arr;
      }
    },
    methods: {
      /**
       * @description 关闭遮罩层
       */
      closeShade(event) {
        if (event.target !== event.currentTarget) return;
        this.currentIndex = 0;
        this.isShowShade = false;
      },
      /**
       * 改变当前页
       * @param page 当前页
       */
      showSlides(page) {
        let imgLength = this.filterImages.length;
        if (page > imgLength - 1) {
          this.currentIndex = 0;
        } else if (page < 0) {
          this.currentIndex = imgLength - 1;
        }
      },
      createImageYl() {
        this.isShowShade = true;
      },
    }
  }
</script>

<style lang="scss" scoped>

  .update_page {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    background: rgba(0, 0, 0, 0.7);
  }

  .search-result {
    font-size: 20px;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
  }

  .next {
    @extend .update_page;
    right: 40px;
  }

  .prev {
    @extend .update_page;
    left: 40px;
  }

  .shade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    text-align: center;

    .slider {
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      /*overflow: hidden;*/
      .slider-item {
        cursor: pointer;
      }
      ._detail {
        color: #fff;
        text-align: start;
        position: relative;
        width: 100%;
        margin-top: 5px;

        .right {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }
  .room-info {
    width: 100%;
    position: relative;
    vertical-align: top;
    display: inline-block;
    overflow: hidden;
    text-align: left;
    font-size: 0;
    .left {
      width: 84px;
      height: 84px;
      display: inline-block;
      vertical-align: top;
      border-radius: 5px;
      border: 1px solid transparent;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        /*<!--margin-top: -16px;-->*/
      }
      .img-count {
        width: 20px;
        height: 20px;
        font-size: 12px;
        color: white;
        background-color: #6d95fd;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 10;
        text-align: center;
        line-height: 1.6667;
      }
    }
    .right {
      height: 84px;
      min-width: 150px;
      width: 180px;
      display: inline-block;
      vertical-align: top;
      margin-left: 10px;
      position: relative;
      p {
        line-height: 1.5;
        color: #444;
        margin: 5px 0;
      }
    }
  }

</style>
